import { GameTeam, GameTeamPK } from '@/services/game/GameController';
import { CheckCard } from '@ant-design/pro-components';
import { Card, Flex, Modal, Radio, Select, Typography } from 'antd';
import React, { PropsWithChildren } from 'react';
/**
 * 赛事信息-替换对阵
 */
interface Props {
  pkData?: GameTeamPK;
  gameId?: string;
  onCancel: (colse: boolean) => void;
}

const GameChangeTeamDialog: React.FC<PropsWithChildren<Props>> = (props) => {
  const { onCancel, pkData } = props;
  const [gameTeams, setGameTeams] = React.useState<GameTeam[]>([]);

  React.useEffect(() => { }, []);
  return (
    <Modal
      open={true}
      onCancel={() => onCancel(false)}
      onOk={() => { }}
      width="40%"
      height="100%"
      title="变更对阵队伍"
      style={{ padding: 0, top: 10, alignItems: 'center' }}
    >
      <Card>
        <Flex vertical>
          <CheckCard.Group onChange={(value) => {
            console.log('value=', value);
          }}>
            <CheckCard title={'编号' + (pkData?.pkTeamA?.teamCode ?? '')} description={`${pkData?.pkTeamA?.teamPerson?.playerName}/${pkData?.pkTeamA?.teamPerson2?.playerName}`} value={`${pkData?.pkTeamAId ?? 'A'}`} />
            <CheckCard title={'编号' + (pkData?.pkTeamB?.teamCode ?? '')} description={`${pkData?.pkTeamB?.teamPerson?.playerName}/${pkData?.pkTeamB?.teamPerson2?.playerName}`} value={`${pkData?.pkTeamBId ?? 'B'}`} />
          </CheckCard.Group>
          <p></p>
          <Typography.Text>更换队伍</Typography.Text>
          <Select
            showSearch
            placeholder="Select a person"
            filterOption={(input, option) =>
              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
            }
            options={[
              { value: '1', label: 'Jack' },
              { value: '2', label: 'Lucy' },
              { value: '3', label: 'Tom' },
            ]}
          />
        </Flex>
      </Card>
    </Modal>
  );
};
export default GameChangeTeamDialog;
